<template lang="pug">
  .clearfix
    Modal(
      width="400"
      v-model="isShowBatchImportModal"
      title="批量导入薪资明细"
      class-name="vertical-center-modal"
    )
      Row
        Col.pl-10(span="24")
          Button.pull-left.mr-10(:to="templateDownLoadUrl" target="_blank") 模板下载
          Upload(
            ref="upload"
            :before-upload="handleBeforeUploadBatchImport"
            :on-success="uploadSuccessBatchImport"
            accept=".xls, .xlsx"
            :max-size="10 * 1024"
            :on-exceeded-size="handleMaxSizeTen"
            :action="'/api/EmployeeSalary/Import?id=' + salaryId + '&Year=' + year"
            :show-upload-list="false"
            :headers="headers"
          )
            Button(type="info") 导入
        Col.pl-10(span="24")
          .text-gray-9.pt-10.pb-10 仅支持上传10M以内的xlsx文件
        Col.pl-10.pt-10(span="24")
          Tag(v-if="file") {{file.name}}
        Col.pl-10.pt-10(span="24" v-if="errorData.isError")
          Button(type="warning" :to="errorData.downLoadUrl" target="_blank") 下载错误文件

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmitBatchImport" :loading="!isCanSubmit") 确定
</template>

<script>
import { Common } from '@/utils/common.js'
import Cookies from 'js-cookie'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro.replace('/api', '/')

export default {
  name: '',

  props: {
  },

  data () {
    return {
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      isShowBatchImportModal: false,
      salaryId: '',
      // companyName: '',
      file: null,
      errorData: {
        errorId: '',
        isError: false,
        downLoadUrl: null
      },
      templateDownLoadUrl: baseUrl + 'Content/Template/批量导入员工薪资模板.xls?random=' + Math.floor(Math.random() * 10),
      year: null,
      isCanSubmit: true
    }
  },

  watch: {
  },

  mounted () {
    this.salaryId = this.$route.query.id
  },

  methods: {
    cancel () {
      this.isShowBatchImportModal = false
      this.file = null
    },

    show () {
      this.isCanSubmit = true
      this.isShowBatchImportModal = true
      this.file = null
    },

    // 批量导入-上传前文件
    handleBeforeUploadBatchImport (file) {
      this.errorData.isError = false
      this.file = file
      console.log('file: ', this.file)
      return false
    },

    // 上传成功
    uploadSuccessBatchImport (res, row) {
      if (res.data) {
        this.$Message.error({
          content: res.message,
          duration: 10,
          closable: true
        })
        this.errorData.isError = true
        this.errorData.downLoadUrl = baseUrl + 'api/EmployeeSalary/ExportErrorFile?fileName=' + res.data
      } else {
        this.$Message.success(res.message)
        this.errorData.isError = false
        this.file = null
        this.isShowBatchImportModal = false
      }
      this.$emit('query')
    },

    // 确定导入
    handleSubmitBatchImport () {
      this.isCanSubmit = false
      if (this.file) {
        this.$refs.upload.post(this.file)
        // this.$emit('query')
      } else {
        this.isCanSubmit = true
        this.$Message.warning('请选择文件！')
      }
    },

    handleMaxSizeTen () {
      this.$emit('handleMaxSizeTen')
    }
  }
}
</script>

<style lang="less" scope>
</style>
